<template>
  <div :class="prefixCls">
    <PreviewGroup>
      <slot v-if="!imageList || $slots.default"></slot>
      <template v-else>
        <template v-for="item in getImageList" :key="item.src">
          <Image v-bind="item">
            <template #placeholder v-if="item.placeholder">
              <Image v-bind="item" :src="item.placeholder" :preview="false" />
            </template>
          </Image>
        </template>
      </template>
    </PreviewGroup>
  </div>
</template>
<script lang="ts" setup>
import type { PropType } from "vue";
import { computed } from "vue";

import { Image } from "ant-design-vue";
import { useDesign } from "@/hooks/web/useDesign";
import { propTypes } from "@/utils/propTypes";
import { isString } from "@/utils/is";

interface ImageProps {
  alt?: string;
  fallback?: string;
  src: string;
  width: string | number;
  height?: string | number;
  placeholder?: string | boolean;
  preview?:
    | boolean
    | {
        visible?: boolean;
        onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
        getContainer: string | HTMLElement | (() => HTMLElement);
      };
}

type ImageItem = string | ImageProps;

const PreviewGroup = Image.PreviewGroup;

defineOptions({ name: "ImagePreview" });

const props = defineProps({
  functional: propTypes.bool,
  imageList: {
    type: Array as PropType<ImageItem[]>,
  },
});

const { prefixCls } = useDesign("image-preview");

const getImageList = computed((): any[] => {
  const { imageList } = props;
  if (!imageList) {
    return [];
  }
  return imageList.map((item) => {
    if (isString(item)) {
      return {
        src: item,
        placeholder: false,
      };
    }
    return item;
  });
});
</script>
<style lang="less">
@prefix-cls: ~"@{namespace}-image-preview";

.@{prefix-cls} {
  .ant-image {
    margin-right: 10px;
  }

  .ant-image-preview-operations {
    background-color: rgb(0 0 0 / 40%);
  }
}
</style>
